{% extends 'base.html' %}

{% block title %}{{ tag.name }} - 标签 - 个人博客{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-12 mb-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h1 class="mb-2">标签: {{ tag.name }}</h1>
                    <p class="text-muted">共 {{ posts.paginator.count }} 篇文章</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        {% for post in posts %}
        <div class="col-md-6 mb-4">
            <div class="card h-100 shadow-sm">
                {% if post.featured_image %}
                <img src="{{ post.featured_image.url }}" class="card-img-top" alt="{{ post.title }}">
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ post.title }}</h5>
                    <p class="card-text text-muted">
                        <small>
                            <i class="fas fa-user me-1"></i> {{ post.author.username }} |
                            <i class="fas fa-calendar me-1"></i> {{ post.publish_date|date:"Y-m-d" }} |
                            <i class="fas fa-eye me-1"></i> {{ post.views }}
                        </small>
                    </p>
                    <p class="card-text">{{ post.summary|truncatewords:20 }}</p>
                </div>
                <div class="card-footer bg-transparent">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            {% if post.category %}
                            <a href="{% url 'category_detail' post.category.slug %}" class="badge bg-primary text-decoration-none">{{ post.category.name }}</a>
                            {% endif %}
                            {% for t in post.tags.all %}
                            {% if t != tag %}
                            <a href="{% url 'tag_detail' t.slug %}" class="badge bg-secondary text-decoration-none">{{ t.name }}</a>
                            {% endif %}
                            {% endfor %}
                        </div>
                        <a href="{{ post.get_absolute_url }}" class="btn btn-sm btn-outline-primary">阅读更多</a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="alert alert-info">该标签下暂无文章</div>
        </div>
        {% endfor %}
    </div>

    <!-- 分页 -->
    {% if posts.paginator.num_pages > 1 %}
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if posts.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1" aria-label="First">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% endif %}

            {% for num in posts.paginator.page_range %}
            {% if posts.number == num %}
            <li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
            {% elif num > posts.number|add:'-3' and num < posts.number|add:'3' %}
            <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
            {% endif %}
            {% endfor %}

            {% if posts.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ posts.paginator.num_pages }}" aria-label="Last">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}

